.city__profile {
    position: absolute;
    left: 0;
    top: 0;
    width: 1280px;
    height: 720px;
}

.city__profile-content {
    position: absolute;
    width: 1280px;
    height: 720px;
}

/****************/
/* common style */
/****************/
.city__profile-head {
    position: absolute;
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #a0a0a0;
    font-size: 28px;
}

.city__profile-head .line {
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -60px;
    bottom: -4px;
    width: 120px;
    height: 4px;
    background: #46a7e7;
}

.city__profile-head-single {
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 80px;
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #a0a0a0;
    font-size: 28px;
}

.city__profile-separator {
    position: absolute;
    top: 140px;
    width: 100%;
    height: 1px;
    left: 0;
    margin-left: 0;
    /*background: rgba(255, 255, 255, .1);*/
}

.city__profile-li,
.city__profile-si {
    position: absolute;
    display: inline-block;
    font-size: 24px;
    height: 60px;
    line-height: normal;
    border: 2px solid rgba(255, 255, 255, .1);
    color: #fff;
    border-radius: 10px;
    padding-left: 60px;
    opacity: .5;
}

.city__profile-li {
    width: 420px;
}

.city__profile-si {
    width: 235px;
}

.city__profile-li:focus,
.city__profile-si:focus {
    color: #fff;
    border: 2px solid #46a7e7 !important;
    box-shadow: #46a7e7 0 0 12px 3px;
    opacity: 1 !important;
}

.city__profile-lb,
.city__profile-mb,
.city__profile-sb {
    position: absolute;
    display: inline-block;
    font-size: 24px;
    height: 60px;
    line-height: 60px;
}

.city__profile-lb,
.city__profile-mb,
.city__profile-sb {
    text-align: center;
    color: #a0a0a0;
    border-radius: 10px;
    /*background-color: #4a5169;*/
    background: rgba(255, 255, 255, .1);
}

.city__profile-lb:focus,
.city__profile-mb:focus,
.city__profile-sb:focus {
    color: #fff;
    background-color: #469ed7;
}

.city__profile-lb {
    width: 480px;
}

.city__profile-mb {
    width: 295px;
}

.city__profile-sb {
    width: 160px;
}

.city__profile-info {
    position: absolute;
    display: inline-block;
    font-size: 24px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #a0a0a0;
}

.city__profile-el {
    position: absolute;
    display: inline-block;
    font-size: 24px;
    width: 420px;
    height: 60px;
    line-height: 60px;
    border: 2px solid rgba(255, 255, 255, .1);
    color: #fff;
    border-radius: 10px;
    padding-left: 60px;
    opacity: .5;
    letter-spacing: 1px;
}

.city__profile-phone {
    background: url(img/profile/svg/phone.svg) 25px center no-repeat;
}

.city__profile-phone:focus {
    background: url(img/profile/svg/phone_focus.svg) 25px center no-repeat;
}

.city__profile-password {
    background: url(img/profile/svg/password.svg) 25px center no-repeat;
}

.city__profile-password:focus {
    background: url(img/profile/svg/password_focus.svg) 25px center no-repeat;
}

.city__profile-code {
    background: url(img/profile/svg/code.svg) 25px center no-repeat;
}

.city__profile-code:focus {
    background: url(img/profile/svg/code_focus.svg) 25px center no-repeat;
}

.city__profile-name {
    background: url(img/profile/svg/name.svg) 25px center no-repeat;
}

.city__profile-name:focus {
    background: url(img/profile/svg/name_focus.svg) 25px center no-repeat;
}

.city__profile-id {
    background: url(img/profile/svg/id.svg) 25px center no-repeat;
}

.city__profile-id:focus {
    background: url(img/profile/svg/id_focus.svg) 25px center no-repeat;
}

/***************/
/* login style */
/***************/
#login #fp, #login #pp {
    border: 4px solid transparent;
    border-radius: 10px;
    margin-top: -10px;
}

#login #fp:focus, #login #pp:focus {
    color: #469ed7;
    border: 4px solid #469ed7;
    box-shadow: #46a7e7 0 0 12px 1px;
}

#login #fp.hold, #login #pp.hold {
    color: #469ed7;
}

#login #fp.hold .line, #login #pp.hold .line {
    display: block;
}

#login #fp {
    left: 440px;
    top: 77px;
}

#login #pp {
    left: 640px;
    top: 77px;
}

#login #fp-1, #login #fp-2, #login #fp-4, #login #fp-5,
#login #pp-1, #login #pp-2, #login #pp-4, #login #pp-5 {
    left: 400px;
}

#login #fp-3, #login #pp-3 {
    right: 400px;
}

#login #fp-1, #login #pp-1 {
    top: 220px;
}

#login #fp-2, #login #fp-3,
#login #pp-2, #login #pp-3 {
    top: 308px;
}

#login #fp-4, #login #pp-4 {
    top: 394px;
}

#login #fp-5, #login #pp-5 {
    top: 480px;
}

/******************/
/* register style */
/******************/
#register #up-1,
#register #up-2,
#register #up-4,
#register #pp-1,
#register #pp-2 {
    left: 400px;
}

#register #up-3 {
    right: 400px;
}

#register #up-1 {
    top: 240px;
}

#register #up-2,
#register #up-3 {
    top: 325px;
}

#register #up-4 {
    top: 415px;
}

#register #pp-1 {
    top: 245px;
}

#register #pp-2 {
    top: 330px;
}

/***********************/
/* find-password style */
/***********************/
#find-password #up-1,
#find-password #up-2,
#find-password #up-4,
#find-password #pp-1,
#find-password #pp-2 {
    left: 400px;
}

#find-password #up-3 {
    right: 400px;
}

#find-password #up-1 {
    top: 240px;
}

#find-password #up-2,
#find-password #up-3 {
    top: 325px;
}

#find-password #up-4 {
    top: 415px;
}

#find-password #pp-1 {
    top: 245px;
}

#find-password #pp-2 {
    top: 330px;
}

/*************************/
/* personal-center style */
/*************************/
#personal-center #np-1 {
    left: 350px;
}

#personal-center #np-2 {
    left: 50%;
    margin-left: -90px;
}

#personal-center #np-3 {
    right: 350px;
}

#personal-center #cp-1 {
    left: 420px;
}

#personal-center #cp-2 {
    right: 420px;
}

#personal-center #cp-1,
#personal-center #cp-2 {
    top: 410px;
    width: 180px;
}

#personal-center #np-1,
#personal-center #np-2,
#personal-center #np-3 {
    top: 330px;
    width: 180px;
}

#personal-center #nc-phone {
    width: 400px;
    left: 50%;
    margin-left: -200px;
    top: 215px;
    letter-spacing: 1px;
}

#personal-center #c-name,
#personal-center #c-id,
#personal-center #c-phone {
    left: 420px;
    letter-spacing: 1px;
}

#personal-center #c-name {
    top: 200px;
}

#personal-center #c-id {
    top: 260px;
}

#personal-center #c-phone {
    top: 320px;
}

/*************************/
/* change-password style */
/*************************/
#change-password #pp-1,
#change-password #pp-3,
#change-password #pp-4 {
    left: 400px;
}

#change-password #pp-2 {
    right: 400px;
}

#change-password #pp-1,
#change-password #pp-2 {
    top: 240px;
}

#change-password #pp-3 {
    top: 330px;
}

#change-password #pp-4 {
    top: 415px;
}

#change-password #fp1-1,
#change-password #fp1-3 {
    left: 400px;
}

#change-password #fp1-2 {
    right: 400px;
}

#change-password #fp1-1,
#change-password #fp1-2 {
    top: 325px;
}

#change-password #fp1-3 {
    top: 415px;
}

#change-password #notice {
    left: 50%;
    margin-left: -200px;
    top: 190px;
    width: 400px;
    font-size: 20px;
    letter-spacing: 2px;
}

#change-password #phone {
    left: 50%;
    margin-left: -200px;
    top: 250px;
    width: 400px;
    font-size: 33px;
    letter-spacing: 4px;
    color: #469ed7;
    font-family: din_regularalternate, sans-serif;
}

#change-password #fp2-1,
#change-password #fp2-2 {
    left: 440px;
}

#change-password #fp2-1 {
    top: 245px;
}

#change-password #fp2-2 {
    top: 330px;
}

/****************************/
/* user-certification style */
/****************************/
#user-certification #up-1,
#user-certification #up-2,
#user-certification #up-3,
#user-certification #phone {
    left: 400px;
}

#user-certification #up-1 {
    top: 240px;
}

#user-certification #up-2 {
    top: 330px;
}

#user-certification #up-3 {
    top: 500px;
}

#user-certification #phone {
    top: 415px;
}

#user-certification #notice {
    left: 50%;
    margin-left: -300px;
    top: 165px;
    width: 600px;
}